<template>
  <el-card class="box-card">
    <!-- 设置文章管理 -->
    <div slot="header" class="clearfix">
      <span>添加笔记</span>
    </div>

    <!-- 发布文章 -->
    <div class="article-title-container">
      <el-input size="large"  v-model="article.title" placeholder="输入文章标题"/>
      <el-button type="warning" size="large" @click="openDialog" style="margin-left:10px">保存草稿</el-button>
      <el-button type="danger" size="large" @click="openDialog" style="margin-left:10px">发布文章</el-button>
    </div>

    <!-- 文章内容 -->
    <mavon-editor ref="md" v-model="article.content" style="height:calc(100vh - 260px)"/>

    <!-- 填写信息弹出框 -->
    <el-dialog :title="`发布文章：${article.title}`" v-model="showDialog" width="30%">


      <el-form label-position="left" label-width="80px" :model="article" size="large">

        <!-- ----------文章分类开始---------- -->
        <el-form-item label="文章分类">

          <el-tag
              v-show="article.categoryName"
              :key="article.categoryName"
              type="success"
              class="mx-1"
              closable
              :disable-transitions="false"
              @close="removeCategory">
            {{ article.categoryName }}
          </el-tag>
<!--          <el-tag type="success"-->
<!--                  v-show="article.categoryName"-->
<!--                  style="margin:0 1rem 0 0"-->
<!--                  :closable="true"-->
<!--                  @close="removeCategory">-->
<!--            {{ article.categoryName }}-->
<!--          </el-tag>-->
          <!-- 分类选项 -->
<!--            <div class="popover-title"></div>-->
            <!-- 搜索框 -->

<!--          <el-button style="margin-left: 20px;margin-top: 30px" type="primary" @click="stor2()">确定</el-button>-->



            <!-- 分类数据展示 -->
            <div class="popover-container">
              <el-select v-model="categoryName"
                         placeholder="请选择分类" style="margin-left: 5px; margin-top: 30px">
                <el-option
                    v-for="item in categoryList"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId"
                    @click="addCategory(item)">
                </el-option>
              </el-select>
<!--              <el-button type="success"  size="small" @click="addCategory(item)"> 添加分类 </el-button>-->

<!--              <div class="category-item" v-for="item in categoryList" :key="item.categoryId"-->
<!--                   @click="addCategory(item)">-->
<!--                {{ item.categoryName }}-->
<!--              </div>-->
              <el-radio-group v-model="article.artStatus" size="large">
                <el-radio-button label="1" >公共</el-radio-button>
                <el-radio-button label="2" >私有</el-radio-button>
              </el-radio-group>
            </div>
<!--            <el-button type="success" plain slot="reference" size="small"> 添加分类 </el-button>-->


        </el-form-item>

        <!-- 内容 -->

      </el-form>

      <span slot="footer" style="margin-left: 100px">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">发布</el-button>
      </span>
    </el-dialog>


  </el-card>
</template>

<script>
// import { addArticle, updateArticle, getArticleById } from '@/api/article'
import {ref} from "vue";
import {useLoginStateStore} from "../../store/storeLoginState.js";
import {ElNotification} from "element-plus";
export default {
  name: 'Addarticle',
  setup(){
    const loginStateStore =  useLoginStateStore();

    return {
      loginStateStore:loginStateStore
    }
  },

  created() {

  },

  data() {
    return {
      // radio1:1,
      showDialog: false,
      categoryName: "",
      categoryList: [],
      article: {
        artStatus:1,
        id: "",
        userId: "",
        title: "",
        categoryId: "",
        content: "",
        categoryName: null
      }
    }
  },

  methods: {
    getCategoriesList() {

      var categoryName = "";
      let _this = this;
      // _this.article.userId=_this.loginStateStore.loginUserName
      _this.article.userId=window.sessionStorage.getItem("userNum")

      // console.log("90909090",_this.loginStateStore.loginUserName)
      let url = "/studyadmin/person-article/getCategory";
      _this.$axios.get(url,{params:{categoryName:categoryName}}).then(function(serverData){

        //分类集合
        if(serverData.data.code===0){
          _this.categoryList=serverData.data.data
          console.log(_this.categoryList)
          // for(let i=0;i<serverData.data.data.length;i++){
          //   console.log("====",serverData.data.data[i].categoryName)
          //   _this.categoryList.push(serverData.data.data[i].categoryName);
          // }
        }
      })
    },

    //搜素分类名称
    // findCategories(queryString) {
    //   return new Promise((resolve) => {
    //     setTimeout(() => {
    //       resolve(['vue', 'javascript', 'css', 'html', 'element-ui'].filter(item => item.includes(queryString)));
    //     }, 200);
    //   });
    // },
    // handleSelect(item) {
    //   console.log(item);
    // },
    findCategories(categoryName, cb) {
      let _this = this;
      let url = "/studyadmin/person-article/getCategory";
      _this.$axios.get(url,{params:{categoryName:categoryName}}).then(function(serverData){
        if(serverData.data.code===0){
          console.log("----------------",serverData.data.data)
          for(let i=0;i<serverData.data.data.length;i++){
            console.log("==ioioioioio==",serverData.data.data[i].categoryName)
            cb(serverData.data.data[i].categoryName);
          }

        }
      })
    },
    saveCategory() {
      let _this = this;
      if (_this.categoryName.trim() != "") {
        _this.addCategory({
          categoryName: _this.categoryName
        });
        _this.categoryName = "";
      }
    },
    addCategory(item) {
      let _this = this;
      _this.article.categoryName = item.categoryName;
    },
    removeCategory() {
      let _this = this;

      _this.article.categoryName = null;
    },
    handleFindCategories(item) {
      let _this = this;
      _this.addCategory({
        categoryName: item.categoryName
      });
    },


    // 打开文章信息填写框
    openDialog() {
      let _this=this;
      if (_this.article.title.trim() == "") {
        _this.$message.error("文章标题为空，请填写文章标题");
        return false;
      }
      if (_this.article.content.trim() == "") {
        _this.$message.error("文章内容为空，请填写文章内容");
        return false;
      }
      // console.log(this)
      _this.getCategoriesList();
      _this.showDialog = true;
    },

    handleSubmit(){
      let _this=this;
      _this.showDialog = true;
      // var body = this.article;

      if (_this.article.title.trim() == "") {
        _this.$message.error("文章标题不能为空");
        return false;
      }
      if (_this.article.content.trim() == "") {
        _this.$message.error("文章内容不能为空");
        return false;
      }
      if (_this.article.categoryName == null) {
        _this.$message.error("文章分类不能为空");
        return false;
      }


      let url = "/studyadmin/person-article/create";

      _this.$axios.post(url,_this.article).then(function(serverData){
        if(serverData.data.code===0){
          _this.$notify({
              title: "文章发表成功",
              message: `文章《${_this.article.title}》发表成功!`,
              type: "success",
            });
          _this.$router.push("/student/stuArticle");
          }
        else if(serverData.data.code){
          ElNotification({
            title: "文章发表失败",
            message: serverData.data.msg,
            type: 'warning',
            duration: 0,
          })
        }

      })
    },

    handleCancel() {
      this.showDialog = false;
    },
  }

}
</script>

<style >

.article-title-container {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

.box-card {
  width: 98%;
  margin: 1%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.clearfix span {
  font-weight: 600;
}

</style>

